<template>
	<view class="">
		<view class="head " :style="{
			  backgroundImage: `url('${bgpic}')`,
			  backgroundSize: '100% 100%',
			  height:'480rpx'
			}">
			<view class="text-center fontSize-32 weight-700 paddingTop-100" style="color: #fff;">
				百霸智育·故事汇
			</view>
		</view>
		<view class="box ">
			<view class="flex u-flex-between">
				<view class="flex flex-center">
					<image :src="avatar" mode=""></image>
					<view class="name">
						{{username}}
					</view>
				</view>
				<view class="time">
					{{time}}
				</view>
			</view>
			<view class="pro" v-html="story"></view>
		</view>
		<view class="pos flex u-flex-between">
			<button class="btn" open-type="share">
				分享给好友
			</button>
			<view class="btn" @click="indexClick">
				更多故事
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onShareAppMessage
	} from '@dcloudio/uni-app';
	const page = ref(1)
	const big_sort = ref(1)
	const small_sort = ref(1)
	const user_id = ref('')
	const code = ref('')
	const getShareStoryinfoApi = inject('getShareStoryinfo')
	const bgpic = ref('')
	const username = ref('')
	const story = ref('')
	const avatar = ref('')
	const time = ref('')
	onShareAppMessage((res) => {
		if (res.from === 'button') { // 来自页面内分享按钮
			console.log(res.target)
		}
		return {
			title: '我在百霸智育学英语，在这里不知不觉中单词都记住了，你也来试试吧！',
			content: '我在百霸智育学英语，在这里不知不觉中单词都记住了，你也来试试吧！',
			path: '/pagesA/reciteWords/wordDetail?page=' + page.value + '&small_sort=' + small_sort.value +
				'&big_sort=' + big_sort.value+'&user_id='+user_id.value,
			imageUrl: 'http://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/shareBj.png'
		}
	})
	onLoad((op) => {
		page.value = op.page
		small_sort.value = op.small_sort
		big_sort.value = op.big_sort
		user_id.value = op.user_id
		uni.login({
			success(res) {
				console.log(res)
				code.value = res.code
				getShareStoryinfoApi({
					page: page.value,
					small_sort: small_sort.value,
					big_sort: big_sort.value,
					code: code.value,
					user_id: user_id.value
				}).then(res => {
					console.log(res, 106)
					bgpic.value = res.shareInfo.bgpic
					username.value = res.shareInfo.username
					story.value = res.shareInfo.story
					avatar.value = res.shareInfo.avatar
					time.value = res.shareInfo.time
				})
			}
		})
	})
	const indexClick = (e) => {
		uni.redirectTo({
			url:'/pagesA/index/storeList'
		})
	}
	
</script>

<style scoped lang="scss">
	.box {
		width: 626rpx;
		height: 936rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		padding: 20rpx 30rpx;
		margin: -60rpx auto 0;

		image {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			margin-right: 5rpx;
		}

		.name {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}

		.time {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}

		.pro {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			padding-top: 30rpx;
		}
	}
	.pos{
		position: fixed;
		bottom: 40rpx;
		left: 24rpx;
		.btn{
			width: 340rpx;
			height: 104rpx;
			border-radius: 92rpx 92rpx 92rpx 92rpx;
			border: 2rpx solid #51D580;
			text-align: center;
			line-height: 104rpx;
			margin-right: 22rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #51D580;
			background: transparent!important;
		}
	}
</style>